@charset "utf-8";
*::after{box-sizing: border-box;
        font-family: 'Poppins', sans-serif;}

html {scroll-behavior: smooth;}

h1  {font-size:;
     font-weight:600;
     color:white}

h2  {font-size:;
     font-weight:600;}

h3  {font-size:;
     font-weight:400;}

h4  {font-size:;
     font-weight:500;}

h5  {font-size:;
     font-weight:600;}

h6  {font-size:;
     font-weight:500;}


p  {font-size:;
     font-weight:400;}



header      {width:100%;
            background-image:url(images/service_header_1.jpg);
            padding-bottom:5vh;
          
            background-size:100% 120%;}

#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color:white;
     opacity:0.5;}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	float: left;
	background-color:white;
	}

/* Styling the links */
nav a {
	display:block;
	padding:22px 20px;	
	color:black;
	font-size:17px;
     font-weight:600;
	text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
	background-color:#2f7aeb; 
}
 
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:block;
}
	

nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}


nav ul ul ul li {
	position: relative;
	top:-60px;
	left:170px; 
}
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: black;
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #000000;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {color:#FFF;
		background-color: #000000;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #212121; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display:block;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}
#head_text      {width:50%;
                 margin-left:25%;
                 color:white;
                 margin-top:25vh;
                 text-align: center;}

#head_text h2   { box-shadow: inset 0 0 35px 0 #000000;
                 color:white;
                 margin-top:40vh;}

.buttons        {margin-top:8vh;}

button          {width:20%;
                 color:black;
                 background:white;
                 font-weight:500;
                 border:2px solid #2f7aeb;
                 padding:1vh 2vw 1vh 2vw ;
                 margin-top:25vh;
                }

button:hover   {background:#2f7aeb;
    }


    /* header css end */

#about    {width:100%;
           padding:10vh 5% 5vh 5% ;}

#about h1    {text-align:center;}

#about p  {background:#C9CFFF;
           padding:8vh 10% 8vh 10%;}


     /* about css end */



#Key_features  {width:100%;
                padding:5vh 5% 5vh 5%;
                display:flex;}

.key_text      {width:40%;
               padding-top:15vh;}


.key_img       {width:50%;
                padding-left:10%;}

.key_img img   {width:80%;
                transition-timing-function:ease-in-out;
                transition-duration:1s;
                }

.key_img img:hover {transform:scale(1.1,1.1);
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

     /* Key_features part end  */

#management    {width:100%;
                padding:5vh 5% 5vh 5%;}

#management img     {width:80%;
                     margin-left:10%;}

/* management css end */

#keypoint      {width:100%;
                padding:5vh 5% 5vh 10%;
                }

#keypoint ul   {margin-top:5vh;}

#keypoint  li   {font-size:1.4vw;
                list-style-image: url('images/list_style.png');
                margin-top:2vh;}

#keypoint  li:hover {background:rgb(0, 0, 0);
                    color:white;}

/* keypoint css end */

#contact        {width:100%;
                 padding:10vh 20% 5vh 20%;
                 display:flex;
                 }
        
.con_text       {width:80%;}
    
.con_text table {width:100%;}

.con_text input    {width:50%;}

.con_text button {padding:1.5vh 2vw 1.5vh 2vw;
                  background:#c9cfff;
                  border:none;
                  border-radius:30px;
                  margin-top:5vh;
                  font-size:1.5vw;}

.con_img        {width:30%;
                 padding-top:15vh;}

.con_img img    {width:100%;
}

/* contact part end */

footer           {width:100%;
                  background-image:url(images/footer.png);
                  padding:10vh 30% 5vh 20%;
                  color:white;
                  background-size:100% 100%;}

footer td       {width:40%;
                 padding-left:5%;}

footer th       {width:40%;
                 padding-left:5%;}

table img      {margin-left:8%;}

footer hr       {width:100%;}










/* Extar large screen ke liye */

@media only screen and (max-width:1000px) {


header      {padding-bottom:15vh;
             background-size:cover;}

#head_text      {width:60%;
                  margin-top:10vh;
                 margin-left:20%;}


button          {width:50%;
                 margin-top:2vh;}

button:hover   {background:#2f7aeb;
    }


    /* header css end */

    #about    {width:100%;
     padding:10vh 5% 5vh 5% ;}

#about h1    {text-align:center;}

#about img    {width:80%;
         margin-left:10%;
         padding-top:5vh;
         margin-top:10vh ;}

#about img:hover {filter:drop-shadow(5px 10px 4px rgb(137, 135, 135));
                  }


/* about css end */

#text      {width:100%;
      background:#C9CFFF;
      border-radius: 25% 55% 30% 35%/10% 30% 30% 40%;
      padding:15vh 5% 15vh 5%;
      animation: jelly 21s linear infinite;}

      @keyframes jelly { 
         15% {border-radius: 5% 25% 10% 35%/7% 30% 5% 40%;}
         30% {border-radius: 15% 35% 30% 35%/40% 60% 30% 20%;}
         45% {border-radius: 5% 15% 30% 15%/40% 30% 22% 30%;}
         65% {border-radius: 25% 25% 20% 35%/70% 30% 10% 40%;}
         80% {border-radius: 5% 35% 30% 35%/40% 60% 30% 9%;}
         100% {border-radius: 25% 15% 8% 35%/20% 30% 30% 40%;}
         

}

/*  text css end  */

#Key_features  {width:100%;
          padding:5vh 5% 5vh 5%;
          display:grid;}

.key_text      {width:100%;}

#keypoint li   {font-size:2.8vw;
          list-style-image: url('images/list_style.png');}

.key_img       {width:100%;
          padding-left:20%;}

.key_img img      {width:80%;}


/* Key_features part end  */




#contact        {padding:10vh 20% 5vh 20%;
                 display:grid;
                 }
        
.con_text       {width:100%;}

.con_text input    {width:80%;}

.con_text button {padding:1.5vh 2vw 1.5vh 2vw;
                  background:#c9cfff;
                  border:none;
                  border-radius:30px;
                  margin-top:5vh;
                  font-size:1.5vw;}

.con_img        {width:100%;
                 padding-top:15vh;
                 padding-left:20%;}

.con_img img    {width:100%;
}

/* contact part end */

footer           {width:100%;
                  background:#c9cfff;
                  padding:2vh 30% 5vh 20%;
                  color:white;
                  background-size:100% 100%;}

footer td       {width:40%;
                 padding-left:5%;}

footer th       {width:40%;
                 padding-left:5%;}

table img      {margin-left:8%;}

footer .col     {margin-top:5vh;}


}